<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>

</head>
<body style="margin: 0px;padding: 0px;">

<div id="app">
    <!-- 这里最好还是写完整 不要缩写 -->
    <!-- 传递参数需要小写:是因为HTML的属性也是不区分大小写的 -->
    <span v-bind:id="id">这里是的ID被绑定上值</span><br/>
    <input type="text" v-model="userName">
    <my-top v-bind:username="userName" id="100" password="123456"></my-top>
    <my-left></my-left>
    <my-right></my-right>
</div>

</body>

<script>
    const app = Vue.createApp({
        data() {
            return {
                userName:'王五',
                id:200,
                password:'123123123123'
            }
        },
        methods: {}
    })

    //组件:公共页面 top、head、left菜单、main、bottom

    //用到脚手架的时候 就可以把template中的内容放到一个单独的文件中

    app.component('my-top',{
        props:['username','id','password'],//props用来接收数据
        template:'<div style="background-color: #f1bb89;height: 100px;">这里是顶部 登录用户:{{username}},{{id}},{{password}}</div>'
    })

    app.component('my-left',{
        template:'<div style="background-color: crimson;width: 200px;height: calc(100VH - 100px);float: left">这里是左侧</div>'
    })

    app.component('my-right',{
        template:'<div style="background-color: darkblue;width: calc(100% - 200px);height: calc(100VH - 100px);float: left">这里是主体部分</div>'
    })

    app.mount("#app")



</script>

</html>